<script setup>
    import {ref,onUpdated,onMounted,onBeforeUpdate} from 'vue'
    let message =ref('hello')   
    // 挂载完毕生命周期
    onMounted(()=>{
      console.log('-----------onMounted---------')
      let span1 =document.getElementById("span1")
      console.log(span1.innerText)
    })
    // 更新前生命周期
   onBeforeUpdate(()=>{
    console.log("===================");
    console.log(message.value);
    let span1 =document.getElementById("span1");
    console.log(span1.innerText);
    
    
    
   })
    // 更新完成生命周期
    onUpdated(()=>{
      console.log('-----------onUpdated---------')
      let span1 =document.getElementById("span1")
      console.log(span1.innerText)
    })
</script>
<template>
  <div>
    <span id="span1" v-text="message"></span> <br>
    <input type="text" v-model="message">
  </div>
</template>
<style scoped>
</style>